<template>
  <div class="button">

    <h3>1. 自定义内容： 按钮上的字，能自己写 </h3>
    <jm-button size='mini'> 我是自定义内容 </jm-button>

    <h3>2. 大小 通过size属性来切换 8个值 </h3>
    <p>'mini', 'tiny', 'small', 'medium', 'large', 'big', 'huge', 'massive' </p>
    <jm-button size='mini'> mini按钮</jm-button>
    <jm-button size='tiny'>tiny按钮</jm-button>

    <h3>3. 动画  两个状态，通过hover来切换</h3>
    <!-- 默认动画：水平切换 -->
    <jm-button animated>
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！水平方向</div>
    </jm-button>
    <br/><br/>
    <!-- 垂直方向切换 -->
    <jm-button size="massive" animated="vertical">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！垂直方向</div>
    </jm-button>
    <br/><br/>
    <!-- 缩放切换 -->
    <jm-button animated="fade">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！</div>
    </jm-button>
  </div>
</template>
<script>
export default {
  name: 'page-button'
}
</script>
